<template>
  <div class='index'>
    <v-popup :flag='popflag'></v-popup>
    <div class='left'>
      <div class='top'>
        <ul>
          <li v-for='(item,index) in listcar' :key='index'>
            <div class='numodule' :style='{backgroundColor:item.color, boxShadow: "0px 3px 30px" + item.color}'>
              <div class='left'>
                <img :src="'./static/images/index-'+(index+1)+'.png'" alt="" style="width: 76px;height: 76px;">
              </div>
              <div class='right'>
                <span v-if='!item.flag'>￥</span>
                <h3>{{item.price}}</h3>
                <p>{{item.content}}</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class='bottom'>
        <v-classification :title='"分享业绩表"'></v-classification>
        <div class='bottom-son'>
          <div class='top'>
            <ul>
              <li>
                <div class='left'>
                  <img :src="'./static/images/index-8.png'" alt="">
                </div>
                <div class="right">
                  <h3>{{summaryList.selfAchievement?summaryList.selfAchievement:0}}</h3>
                  <p>个人业绩</p>
                </div>
              </li>
              <li>
                <div class='left'>
                  <img :src="'./static/images/index-7.png'" alt="">
                </div>
                <div class="right">
                  <h3>{{summaryList.todaySelfAchievement?summaryList.todaySelfAchievement:0}}</h3>
                  <p>昨日业绩</p>
                </div>
              </li>
              <li>
                <div class='left'>
                  <img :src="'./static/images/index-6.png'" alt="">
                </div>
                <div class="right">
                  <h3>{{summaryList.depAchievement?summaryList.depAchievement:0}}</h3>
                  <p>部门业绩</p>
                </div>
              </li>
              <li>
                <div class='left'>
                  <img :src="'./static/images/index-5.png'" alt="">
                </div>
                <div class="right">
                  <h3>{{summaryList.groupAchievement?summaryList.groupAchievement:0}}</h3>
                  <p>团队业绩</p>
                </div>
              </li>
              <li>
                <div class='left'>
                  <img :src="'./static/images/index-9.png'" alt="">
                </div>
                <div class="right">
                  <h3>{{yonJinList.weekMoney?yonJinList.weekMoney:0}}
                    <span style='color: #ffbc42;'>/</span>
                    {{yonJinList.weekGoal?yonJinList.weekGoal:0}}
                  </h3>
                  <p>本周佣金</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="bottom" id='eletable'>
              <v-table :list='list' :tableData='tableData' :maxHeight='maxHeight' @pop='popcallback' :cloumn='8'></v-table>
          </div>
        </div>
      </div>
    </div>
    <div class='right'>
      <div class='right-son'>
        <div class='top'>
          <v-classification :title='"公告"'></v-classification>
          <img src="../../../static/images/more.png" alt="" @click="$router.push({path:'/AnnouncementList'})">
        </div>
        <div class='bottomFa'>
          <div class='bottom'>
            <ul>
              <li v-for="(item,index) in noticeList" :key='index' @click="$router.push({name:'Announcement',params:{id:item.id}})">
                <h3>{{item.title}}</h3>
                <p>{{item.pubTime}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class='right-son'>
        <div class='top'>
          <v-classification :title='"资讯"'></v-classification>
          <img src="../../../static/images/more.png" alt="" @click="$router.push({path:'/newsList'})">
        </div>
        <div class='bottomFa'>
          <div class='bottom'>
            <ul>
              <li v-for="(item,index) in consultList" :key='index' @click="$router.push({name:'news',params:{id:item.id}})">
                <h3>{{item.title}}</h3>
                <p>{{item.createTime}}</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      top="24vh"
      :visible.sync="experience"
      custom-class="experience"
      :show-close="false"
      center>
      <p>欢迎来到新版中国社区</p>
      <p>开启全新体验</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="experienceTips = true;experience = false">开始体验</el-button>
      </span>
    </el-dialog>
    <el-dialog
      top="0vh"
      :visible.sync="experienceTips"
      custom-class="experienceTips"
      :show-close="false">
      <p>自新版中国社区上线之日起，所有Rst建仓均划拨至用社区绑定手机号码注册的<span onclick="window.open('http://bilur.exchange','_blank');" style="color: #418dff;text-decoration: underline;cursor: pointer;">布勒交易(Bilur.Exchange)</span>所账号</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeGuide();">我知道了</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import classification from "../common/classification.vue";
import table from "../common/table.vue";
import popup from "../common/popup.vue";

export default {
  data() {
    return {
      experience:false,
      experienceTips:false,
      popdata: "",
      popflag: false,
      listcar: [
        {
          color: "#ffa200",
          price: "",
          content: "建仓总额"
        },
        {
          color: "#8f83ff",
          price: "",
          content: "建仓BPX数量"
        },
        {
          color: "#fa6464",
          price: "",
          content: "复投总额"
        },
        {
          color: "#31d9a4",
          price: "",
          content: "复投BPX数量",
          flag: true
        }
      ],
      tableData: [
      ],
      list: [
        { key: "tda", title: "账号" },
        { key: "tdb", title: "姓名" },
        { key: "tdc", title: "级别" },
        { key: "tdd", title: "团队级别" },
        { key: "tde", title: "个人业绩" },
        { key: "tdt", title: "注册时间" },
        { key: "tdf", title: "状态" },
        { key: "tdg", title: "电话" },
        { key: "tdh", title: "操作" }
      ],
      maxHeight: "480",
      noticeList: "", //公告列表
      consultList: "", //资讯列表
      summaryList: "", //业绩
      yonJinList: "" //佣金
    };
  },
  created() {
    this.$parent.flag = false;
    let user = JSON.parse(localStorage.getItem("userData"));
    // if (user.exchangeBind == "1" && user.bwBind == "1") {
    //   localStorage.setItem("sfyz", "1");
    // } else {
    //   localStorage.setItem("sfyz", "2");
    // }
    //判断是否第一次登录
    u.userInfo({
      id:localStorage.getItem("userID"),
    },data=>{
      if(data && data.code == "200"){
        if(data.data.isIntroduced==0){
          this.experience=true;
        }
      }
    });
    u.indexTable(data => {
      if (data && data.code == "200") {
        // console.log(data)
        this.tableData = [];
        this.summaryList = data.data;
        data.data.memberList.forEach(item => {
          var obj = {};
          obj.tda = item.loginName;
          obj.tdb = "*" + item.trueName.substring(1);
          obj.tdc = item.memberLevelString;
          obj.tdd = item.groupLevelString;
          obj.tde = item.selfAchievement;
          obj.tdt = item.registerTime;
          obj.tdf = item.isAliveString;
          obj.tdg = item.phone;
          obj.tdh = "详情";
          obj.tdy = item.groupAchievement;
          obj.tdz = item.depAchievement;
          this.tableData.push(obj);
        });
      }
    });
    // 财务汇总接口
    u.summary(data => {
      if (data && data.code == "200") {
        this.listcar[0].price = data.data.bpxBuildingTotal;
        this.listcar[1].price = data.data.bpxBuildingNum;
        this.listcar[2].price = data.data.bpxRecastTotal;
        this.listcar[3].price = data.data.bpxRecastNum;
      }
    });
    //公告接口
    u.announcementList(
      {
        currentCount: 0,
        pageSize: 10
      },
      data => {
        if (data && data.code == "200") {
          this.noticeList = data.data.noticeList;
        }
      }
    );
    //资讯接口
    u.newList(
      {
        currentCount: 0,
        pageSize: 10
      },
      data => {
        if (data && data.code == "200") {
          // console.log(data)
          this.consultList = data.data.consultList;
        }
      }
    );
    //本周佣金
    u.yonJin(data => {
      this.yonJinList = data.data;
      //  console.log(data)
    });
  },
  mounted() {
    let that = this;
    window.onresize = function() {
      that.maxHeight =
        document.querySelector("#eletable").offsetHeight - 20 + "";
    };
    u.getBpxGinsengRate(data => {
      if (data && data.code == "200") {
        localStorage.setItem("bpxhl", data.data);
      }
    })
  },
  methods: {
    popcallback(data) {
      this.popdata = data;
    },
    //关闭第一次登录指引
    closeGuide(){
      this.experienceTips = false;
      u.updateIntroduceStatus({
        id:localStorage.getItem("userID"),
        isIntroduced: 1
      },data=>{
        if(data && data.code == "200"){}
      });
    }
  },
  components: {
    "v-classification": classification,
    "v-table": table,
    "v-popup": popup
  },
  labelHead(h, { column, index }) {
    let l = column.label.length;
    let f = 16; //每个字大小，其实是每个字的比例值，大概会比字体大小差不多大一点，
    column.minWidth = f * l; //字大小乘个数即长度 ,注意不要加px像素，这里minWidth只是一个比例值，不是真正的长度 //然后将列标题放在一个div块中，注意块的宽度一定要100%，否则表格显示不完全
    return h("div", { class: "table-head", style: { width: "100%" } }, [
      column.label
    ]);
  }
};
</script>
<style>
  .experience{
    width: 400px !important;
    background: #ffb001 !important;
  }
  .experience p{
    color: white;
    font-size: 18px;
    text-align: center;
  }
  .experience p:first-child{
    margin: 5px 0 18px 0;
    font-size: 22px;
  }
  .experience .el-dialog__header{
    padding: 0 !important;
  }
  .experience button{
    width: 110px;
    height: 38px;
    color: white;
    font-size: 16px;
    background: #ffb001;
    border: 1px solid white;
    outline: none;
  }
  .experience button:hover{
    color: white;
    background: #ffb001;
    border: 1px solid white;
  }
  .experience button:focus{
    color: white;
    background: #ffb001;
    border: 1px solid white;
  }

  .experienceTips{
    position: absolute;
    top: 70px;
    right: 10px;
    width: 400px !important;
    background: #ffb001 !important;
  }
  .experienceTips p{
    color: white;
    font-size: 16px;
  }
  .experienceTips .el-dialog__header{
    padding: 0 !important;
  }
  .experienceTips .el-dialog__body{
    padding: 20px !important;
  }
  .experienceTips button{
    padding: 0 !important;
    width: 88px;
    height: 30px;
    color: white;
    font-size: 14px;
    background: #ffb001;
    border: 1px solid white;
    outline: none;
  }
  .experienceTips button:hover{
    color: white;
    background: #ffb001;
    border: 1px solid white;
  }
  .experienceTips button:focus{
    color: white;
    background: #ffb001;
    border: 1px solid white;
  }
</style>
<style lang='less' scoped>
.index {
  // #eletable {
  //   > .eletableson {
  //     height: 100%;
  //     overflow-y: auto;
  //     &::-webkit-scrollbar {
  //       background-color: #f5f5f5;
  //       width: 3px;
  //     }
  //     &::-webkit-scrollbar-thumb {
  //       background-color: #d6d6d6;
  //     }
  //   }
  // }
  display: flex;
  height: calc(100% + 34px);
  > .left {
    width: calc(100% - 260px);
    height: 100%;
    > .top {
      height: 180px;
      > ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        > li {
          height: 140px;
          width: 24%;
          > .numodule {
            height: 100%;
            width: 100%;
            display: flex;
            border-radius: 3px;
            overflow: hidden;
            > .left {
              line-height: 210px;
              height: 100%;
              padding-left: 28px;
              margin-right: 30px;
              img {
              }
            }
            > .right {
              padding-top: 35px;
              position: relative;
              > span {
                position: absolute;
                color: white;
                font-size: 24px;
                left: -25px;
                top: 26%;
              }
              > h3 {
                font-weight: bold;
                // font-size: "Myriad Pro";
                font-size: 30px;
                color: white;
              }
              > p {
                font-size: 16px;
                color: white;
              }
            }
            @media (max-width: 1700px) {
              > .left {
                padding-left: 18px;
                margin-right: 20px;
              }
              > .right {
                > span {
                  font-size: 14px;
                  left: -15px;
                  top: 26%;
                }
                > h3 {
                  font-size: "Myriad Pro";
                  font-size: 20px;
                  margin-bottom: 5px;
                }
                > p {
                  font-size: 14px;
                }
              }
            }
            @media (max-width: 1450px) {
              > .left {
                padding-left: 8px;
                margin-right: 10px;
              }
              > .right {
                > span {
                  font-size: 14px;
                  left: -15px;
                  top: 26%;
                }
                > h3 {
                  font-size: "Myriad Pro";
                  font-size: 20px;
                  margin-bottom: 5px;
                }
                > p {
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
    > .bottom {
      background-color: white;
      box-sizing: border-box;
      height: calc(100% - 180px);
      > .bottom-son {
        height: calc(100% - 50px);
        padding: 20px 0;
        box-sizing: border-box;
        > .top {
          > ul {
            display: flex;
            justify-content: flex-start;
            width: 100%;
            > li {
              height: 60px;
              width: 20%;
              display: flex;
              border-right: 1px solid #f0f0f0;
              padding-left: 20px;
              box-sizing: border-box;
              > .left {
                padding-top: 15px;
                box-sizing: border-box;
                margin-right: 38px;
              }
              > .right {
                > h3 {
                  color: #292929;
                  font-size: 28px;
                  margin-bottom: 4px;
                  font-weight: normal;
                }
                > p {
                  color: #666666;
                  font-size: 14px;
                }
              }
              @media (max-width: 1800px) {
                > .left {
                  margin-right: 28px;
                }
                > .right {
                  > h3 {
                    font-size: "Myriad Pro";
                    font-size: 20px;
                    margin-bottom: 5px;
                  }
                }
              }
              @media (max-width: 1450px) {
                padding-left: 20px;
                > .left {
                  margin-right: 10px;
                }
              }
            }
          }
        }
        > .bottom {
          height: calc(100% - 60px);
          padding: 20px;
          padding-bottom: 0px;
          box-sizing: border-box;
          overflow: hidden;
          > .el-table {
            tr {
              background-color: #ccc !important;
            }
          }
        }
      }
    }
  }
  > .right {
    width: 240px;
    margin-left: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > .right-son {
      height: 49%;
      min-height: 122px;
      box-sizing: border-box;
      background-color: white;
      overflow: hidden;
      > .top {
        position: relative;
        height: 50px;
        > img {
          position: absolute;
          top: 10px;
          right: 12px;
          cursor: pointer;
        }
      }
      > .bottomFa {
        height: calc(100% - 50px);
        padding: 5px;
        box-sizing: border-box;
        > .bottom {
          height: 100%;
          padding: 0px 0px 0px 10px;
          overflow-y: auto;
          &::-webkit-scrollbar {
            background-color: #f5f5f5;
            width: 3px;
          }
          &::-webkit-scrollbar-thumb {
            background-color: #d6d6d6;
          }
          > ul {
            height: 100%;
            width: 95%;
            > li {
              font-size: 14px;
              padding: 10px 10px;
              border-bottom: 1px solid #ededed;
              cursor: pointer;
              &:hover {
                background-color: #fff3d9;
                > h3,
                p {
                  color: #ffa200;
                }
              }
              > h3 {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color: #30383e;
                margin-bottom: 10px;
              }
              > p {
                color: #9ba2ab;
              }
            }
          }
        }
      }
    }
  }
}
</style>
<style lang='less'>

</style>


